<template>
  <div class="sanstyle" style="position: relative">
    <!--左边 B-->
    <div>
      <div class="ssl">
        <!--标题 B-->
        <div class="sstitle">
          <div class="twz">
            <span class="dwz">营林面积总览</span>
            <br/>
            <span class="xwz">Forest area</span>
          </div>
        </div>
        <!--标题 E-->

        <!--统计图区域 B-->
        <div class="ecbox" id="pie"></div>
        <!--统计图区域 E-->

        <div style="height: .5rem;"></div>

        <!--标题 B-->
        <div class="sstitle">
          <div class="twz">
            <span class="dwz">历年营林面积</span>
            <br/>
            <span class="xwz">Over the years area</span>
          </div>
        </div>
        <!--标题 E-->

        <!--统计图区域 B-->
        <div class="ecbox" id="bar"></div>
        <!--统计图区域 E-->


      </div>
    </div>
    <!--左边 E-->
    <!--中间B-->
    <div style="position: relative">
      <div class="xjfb" style="width: 1.6rem; left:.3rem;">
        <div>
          <el-select v-model="year" @change="qiehuantuceng" placeholder="请选择">
            <el-option
              v-for="item in yearList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="xjfb" style="width: 1.6rem; left:2.1rem;">
        <div>
          <el-select v-model="fstype" placeholder="请选择">
            <el-option
              v-for="item in fsList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <!--tab切换 B-->
      <!-- <div class="qhtab" style="top: .6rem;left: .34rem">
         <div v-for="(item,index) in navList" :key="index" @click="datamap(item.type)">
           <img :src="item.sts?'/static/images/tab1.png':'/static/images/tab2.png'" alt="">
           <span style="margin-left: .08rem;">{{item.name}}</span>
         </div>
       </div>-->
      <!--tab切换 E-->
      <!--中间地图 B-->
      <div id="map" style="height: calc(100% - 0.6rem);width: 100%;margin-top: .6rem;overflow: hidden;"></div>
      <!--中间地图 E-->
    </div>
    <!--中间E-->

    <!--右边 B-->
    <div>
      <div class="ssls">
        <!--标题 B-->
        <div class="sstitles">
          <div class="twzs">
            <span class="dwz">样方调查</span>
            <br/>
            <span class="xwz">Quadrat survey</span>
          </div>
        </div>
        <!--标题 E-->
        <div class="stjqy">
          <div class="bdbk rzs" style="display:flex;height: 20%;">
            <!--调查次数B-->
            <div>
              <div><span style="color: white;font-size: .16rem;">样方</span></div>
              <div><span style="color: #2EFFF2;font-size: .24rem;line-height: .25rem;">30</span><span
                style="color: white;font-size: .16rem;">个</span>
              </div>
              <div><img style="height: .6rem;" src="/static/images/shipin.png" alt=""></div>
            </div>
            <div>
              <div><span style="color: white;font-size: .16rem;">样方调查</span></div>
              <div><span style="color: #34CEFF;font-size: .24rem;line-height: .25rem;">30</span><span
                style="color: white;font-size: .16rem;">次</span>
              </div>
              <div><img style="height: .6rem;" src="/static/images/zhaopian.png" alt=""></div>
            </div>
          </div>
          <!--调查次数E-->
          <div class="bdbk" style="height: 40%;position: relative;">
            <div class="llbt">
              <span class="dwz" style="line-height: 0;">乔木平均树高TOP5</span>
              <br/>
              <span class="xwz" style="line-height: 0;">Top5 average tree height</span>
            </div>
            <div style="position:absolute;left: 0;height: calc(100% - .6rem);width: 100%;" id="bar1"></div>
          </div>
          <div style="height: 40%;position: relative">
            <div class="llbt">
              <span class="dwz" style="line-height: 0;">乔木平均胸径TOP5</span>
              <br/>
              <span class="xwz" style="line-height: 0;">Top5 mean DBH of trees</span>
            </div>

            <div style="position:absolute;left: 0;height: calc(100% - .6rem);width: 100%;" id="bar2"></div>
          </div>
        </div>

      </div>
    </div>
    <!--右边 E-->
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import json_2018 from '../../static/json/2018';
  import json_2019 from '../../static/json/2019';
  import bajson_2020 from '../../static/json/2020';
  import bajson_2021 from '../../static/json/2021';

  export default {
    name: "sljy",
    data() {
      return {
        year: "2018",
        yearList: [
          {
            value: '2018',
            label: '2018'
          }, {
            value: '2019',
            label: '2019'
          }, {
            value: '2020',
            label: '2020'
          }, {
            value: '2021',
            label: '2021'
          },
        ],
        fstype: '风沙源',
        fsList: [
          {
            value: '风沙源',
            label: '风沙源'
          }
        ],
        navList: [
          {
            name: '功能区划',
            type: 'gnqh',
            sts: true
          },
          {
            name: '网格',
            type: 'wg',
            sts: false
          }
        ],
        maptype: "gnqh",
        JsonObj: {
          "2018": json_2018,
          "2019": json_2019,
          "2020": bajson_2020,
          "2021": bajson_2021,
        },
        bhqName: [],
        MapColor: [
          'rgba(203, 255, 252, 0.8)',
          'rgba(74, 239, 230, 0.8)',
          'rgba(4, 178, 169, 0.8)',
          'rgba(203, 255, 252, 0.8)',
          'rgba(114,8,82,.8)',
          'rgba(174,213,13,.8)',
          'rgba(194,133,112,.8)',
          'rgba(225,66,19,.8)',
          'rgba(94,60,190,.8)',
          'rgba(253,166,199,.8)'
        ]
      }
    },
    mounted() {
      this.drawpie();
      this.drawbar();
      this.drawbar1();
      this.drawbar2();
      let json = this.JsonObj[this.year];
      this.getps(json);
    },
    created() {
      this.areaId = window.sessionStorage.getItem('areaId');
    },
    methods: {
      qiehuantuceng() {
        let json = this.JsonObj[this.year];
        this.getps(json);
      },
      getps(data) {
        let vm = this, json = data;
        let arr = [];
        json.features.forEach((t, index) => {
          arr.push(t.properties.name)
        })
        vm.bhqName = arr;
        vm.datamap(data)
      },
      drawbar1(data) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar1'));
        if (myChart == null) {
          myChart = echarts.init(document.getElementById('bar1'));
        }
        let option = {
          xAxis: {
            type: 'category',
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            data: ['油松', '山杏', '黄栌', '山榆', '山桃'],
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          },
          grid: {
            top: '10%',
            left: '10%',
            right: "1%",
            bottom: "10%"
          },
          series: [
            {
              data: [12.73, 10.99, 7.17, 6.89, 6.0],
              type: 'bar',
              showBackground: true,
              label: {
                show: true,
                position: 'top',
                color: '#fff'
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(46, 255, 242, .1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(46, 255, 242, 1)'
                    }
                  ])
                }
              },
              backgroundStyle: {
                color: 'rgba(255, 255, 255, 1)',
                opacity: .1
              }
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 100);
        window.addEventListener('resize', function () {
          myChart.resize();
        })
      },
      drawbar2(data) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar2'));
        if (myChart == null) {
          myChart = echarts.init(document.getElementById('bar2'));
        }
        let option = {
          xAxis: {
            type: 'category',
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            data: ['油松', '山榆', '山桃', '山杏', '黄栌'],
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          },
          grid: {
            top: '10%',
            left: '10%',
            right: "1%",
            bottom: "20%"
          },
          series: [
            {
              data: [6.27, 5.27, 4.0, 3.92, 3.22],
              type: 'bar',
              showBackground: true,
              label: {
                show: true,
                position: 'top',
                color: '#fff'
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(46, 255, 242, .1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(46, 255, 242, 1)'
                    }
                  ])
                }
              },
              backgroundStyle: {
                color: 'rgba(255, 255, 255, 1)',
                opacity: .1
              }
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 100);
        window.addEventListener('resize', function () {
          myChart.resize();
        })
      },
      datamap(data) {
        /*  this.maptype = flag;
          this.navList.forEach(e => {
            if (flag == e.type) {
              e.sts = true
            } else {
              e.sts = false
            }
          })*/
        // if (flag == 'gnqh') {
        // let url = '/papi/' + this.areaId + '_json/gnqh.json';
        let jsondata = [];
        this.bhqName.forEach((c, x) => {
          jsondata.push(
            {
              name: c,
              value: 1,
              label: {
                show: false,
              },
              itemStyle: {
                show: true,
                areaColor: this.filteryType(),
                borderColor: this.filteryType(),
                borderWidth: "1"
              },
            }
          )
        });
        let geo = {
          type: "map",
          map: 'GeoJson',
          regions: jsondata,
          zoom: 1.1,
          show: true,
          roam: true,
        };
        this.map(data, geo)
        /* }
         if (flag == 'wg') {
           let geo = {
             map: 'GeoJson',
             show: true,
             roam: true,
             zoom: 1.1,
             label: {
               normal: {
                 show: false,
               },
               emphasis: {
                 show: true,
               },
             },
             itemStyle: {
               normal: {
                 areaColor: 'rgba(4, 178, 169, 0.8)',
                 borderColor: '#4AEFE6',
                 borderWidth: 1,
               },
               emphasis: {},
             },
           };
           let url = '/papi/' + this.areaId + '_json/wangge.json';
           this.map(url, geo)
         }*/
      },
      filteryType() {
        let r = Math.floor(Math.random() * 256);
        let g = Math.floor(Math.random() * 256);
        let b = Math.floor(Math.random() * 256);
        let rgba = '(' + r + ',' + g + ',' + b + ',' + '.8)';
        return "rgba" + rgba;
      },
      map(url, geo) {
        let vm = this, key = '';
        if (this.year == '2018') {
          key = '../../static/json/2018.json'
        } else if (this.year == '2019') {
          key = '../../static/json/2019.json'
        } else if (this.year == '2020') {
          key = '../../static/json/2020.json'
        } else if (this.year == '2021') {
          key = '../../static/json/2021.json'
        }
        let myChart = echarts.getInstanceByDom(document.getElementById("map"))
        if (myChart == null) { // 如果不存在，就进行初始化
          myChart = echarts.init(document.getElementById("map"));
        } else {
          myChart.clear();
        }
        $.getJSON(key, function (geoJson) {
          echarts.registerMap('GeoJson', geoJson);
          myChart.showLoading('default', {
            text: '加载中，请稍候...', maskColor: 'rgba(0,0,0,.3)', textColor: '#fff',
          });
          let option = {
            geo: geo,
            series: []
          }
          myChart.setOption(option, true);
          setTimeout(function () {
            myChart.hideLoading();
            myChart.resize();
          }, 500);
          window.addEventListener("resize", function () {
            myChart.resize();
          })
        });
      },
      drawpie() {
        let piearr = [
          {value: 3553, name: '风沙源'},
          {value: 1000, name: '台立'},
          {value: 800, name: '荒山'}
        ];
        let myChart = echarts.getInstanceByDom(document.getElementById('pie'));
        if (myChart == null) {
          myChart = echarts.init(document.getElementById('pie'));
        }
        let option = {
          color: ['#7FFFFF', '#FFF27F', '#917FFF'],
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center',
            textStyle: {
              fontSize: 14,//字体大小
              color: "#fff"
            },
          },
          series: [
            {
              name: '统计',
              type: 'pie',
              center: ['50%', '60%'],
              radius: ['40%', '66%'],
              avoidLabelOverlap: false,
              labelLine: {
                show: true
              },
              label: {
                color: '#fff',
                fontSize: 14,
                formatter: function (parmas) {
                  if (parmas.name == '风沙源') {
                    return parmas.name + '  ' + '{dw|' + parmas.value + '}'
                  }
                  if (parmas.name == '台立') {
                    return parmas.name + '  ' + '{zw|' + parmas.value + '}'
                  }
                  if (parmas.name == '荒山') {
                    return parmas.name + '  ' + '{zj|' + parmas.value + '}'
                  }
                },
                rich: {
                  dw: {
                    color: '#7FFFFF',
                    fontSize: 14
                  },
                  zw: {
                    color: '#FFF27F',
                    fontSize: 14
                  },
                  zj: {
                    color: '#917FFF',
                    fontSize: 14
                  }
                },
              },
              data: piearr
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 100);
        window.addEventListener('resize', function () {
          myChart.resize();
        })
      },
      drawbar() {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar'));
        if (myChart == null) {
          myChart = echarts.init(document.getElementById('bar'));
        }
        let option = {
          color: ['#7FFFFF', '#FFF27F', '#917FFF'],
          legend: {
            top: '5%',
            left: 'center',
            textStyle: {
              fontSize: 14,//字体大小
              color: "#fff"
            },
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {show: false},
              data: ['2018', '2019', '2020']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '风沙源',
              type: 'bar',
              data: [819, 500, 301]
            },
            {
              name: '台立',
              type: 'bar',
              data: [1586, 800, 600]
            },
            {
              name: '荒山',
              type: 'bar',
              data: [746, 400, 300]
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 100);
        window.addEventListener('resize', function () {
          myChart.resize();
        })
      }
    }
  }
</script>

<style scoped>
  @import "../../static/css/jbxx.css";
  @import "../../static/css/sljy.css";
</style>
<style>
  .xjfb .el-input__inner {
    border: none !important;
    background: transparent;
    color: white;
  }

  .el-select-dropdown {
    border: 1px solid rgba(46, 205, 255, .6);
    background: rgba(1, 15, 27, .7);
  }

  .el-select-dropdown__item.selected {
    color: #2efff2;
  }

  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    color: white;
  }

  .el-select-dropdown__item {
    color: #34ceff;
  }

  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background: rgba(46, 255, 242, 0.1);
  }

  .el-icon-warning {
    font-size: .14rem !important;
  }
</style>
